<template>
  <div class="jkLayer-video-iframe">
    <div id="video_div" class="video_div"></div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'videoPlayer',
  model: {
    prop: 'visible',
    event: 'cancel',
  },
  props: {
  },
  data() {
    return {
      layout: '1*1',
      h5player: null,
    };
  },
  computed: {},
  watch: {
  },
  mounted() {
    this.createdH5player();
  },
  methods: {
    createdH5player() {
      this.h5player = null;
      this.h5player = new window.H5Player({
        ele: '#video_div',
        layout: this.layout,
        defBgClass: 'h5vp-bg-img0',
        errorBgClass: 'h5vp-bg-img0-error',
        // layout: '1*1',
        ratio: '16:9',
        enableLoadingGif: true,
        showerror: false,
        border: {
          borderWidth: '0px',
        },
      });
      this.h5player.addEventListener('OnMouseEnter', index => {
        console.log(index);
        this.h5player.createToolbar(index, {
          topBar: {
            items: ['videoClose'],
          },
        });
      });
    },
    // 播放视频
    startPlay() {
      var stream = {
        devicetype: 'rtsp',
        streamtype: 'live',
        url: "rtsp://10.113.16.87:8554/stream1",
        title: '海康高清球机_PTZ_REC',
      };
      this.closePlay();
      this.h5player.play(0, stream, {
        onerror: (ee, e2) => {
          console.log('onerror');
          console.log(ee, e2);
        },
        onnotify: (ee, e2) => {
          console.log(ee, e2);
        },
      });
    },
    closePlay() {
      this.h5player.stop(0);
    },
  },
};
</script>
<style scoped lang="less">
.jkLayer-video-iframe {
  width: 100%;
  height: 100%;
  .video_div {
    width: 100%;
    height: calc(100%);
  }
}
</style>
